<template>
  <div class="shequ-main">
    <div class="shequ-up">
      <EchartLine :XAxis="XAxis" :YAxis="YAxis" :xData="dataPaigong.lineXData" :lineData="dataPaigong.lineYData" :lineGrid="lineGrid" :lineColor="lineColor" :lineWidth="lineWidth" :symbolSize="symbolSize" :symbolType="symbolType" :lineBgColor="lineBgColor" :lineSmooth="lineSmooth" :dataAxis="dataAxis">
      </EchartLine>
    </div>
    <div class="shequ-down">
      <ElTable :tableConfig="dataPaigong.config" :tableData="dataPaigong.tableData" :tableInterval="tableInterval"></ElTable>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import ElTable from "@/components/ElTable.vue";
import { request } from '@/api/request.js'
import EchartLine from "@/components/EchartLine.vue";
export default {
  name: 'ViewPaigongdan',
  data() {
    return {
      tableInterval:4000,
      dataPaigong: [],
      barBgShow: true,
      lineXData:[],
      lineYData:[],
      dataAxis: 'y',
      // 浅色系用色--#0f7261，深色系用色--#c5e1f0
      axisColor: '#c5e1f0',
      lineGrid: {
        left: '10%',
        right: '5%',
        top: '10%',
        bottom: '20%'
      },
      YAxis: {
        type: 'value',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          // 浅色系用色--#0f7261，深色系用色--#c5e1f0
          color: '#c5e1f0',
          fontSize:10,
          margin:8
        }
      },
      XAxis: {
        type: 'category',
        // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        data: [],
        inverse: false,
        boundaryGap: false,
        axisLabel: {
          // 浅色系用色--#0f7261，深色系用色--#c5e1f0
          color: '#c5e1f0',
          fontSize:10,
          margin:8
        }
      },
      baseLineWidth:2,
      lineWidth:2,
      baseAxisLabelFontSize:12,
      axisLabelFontSize:12,
      baseAxisLabelMargin:8,
      axisLabelMargin:8,
      lineColor: '#0dcee1',
      symbolType: "circle",
      baseSymbolSize: 10,
      symbolSize: 10,
      lineBgColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#246c9f' },
        { offset: 0.5, color: '#246c9f' },
        { offset: 1, color: '#c5e1f0' }
      ]),
      lineSmooth: true,
    }
  },
  mounted() {
    this.getPaigongdan();
  },
  methods: {
    getPaigongdan() {
      request({
        url: '/paigongdan',
        method: 'get'
      }).then(res => {
        this.dataPaigong = res.data;
      })
    }
  },
  components: {
    ElTable,
    EchartLine
  },
  watch: {
    dataPaigong: {
      immediate: true, // 这句重要`
      deep: true
    },
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          this.XAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.YAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.XAxis.axisLabel.fontSize = this.baseAxisLabelFontSize * parseFloat(this.$store.state.htmlScale);
          this.XAxis.axisLabel.margin = this.baseAxisLabelMargin * parseFloat(this.$store.state.htmlScale);
          this.YAxis.axisLabel.fontSize = this.baseAxisLabelFontSize * parseFloat(this.$store.state.htmlScale);
          this.YAxis.axisLabel.margin = this.baseAxisLabelMargin * parseFloat(this.$store.state.htmlScale);
          this.symbolSize = this.baseSymbolSize * parseFloat(this.$store.state.htmlScale);
          this.lineWidth = this.baseLineWidth * parseFloat(this.$store.state.htmlScale);
          this.lineColor = this.$store.state.colors.lineColor;
          this.lineBgColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: this.$store.state.colors.barColor },
            { offset: 0.5, color: this.$store.state.colors.barColorGuodu },
            { offset: 1, color: this.$store.state.colors.barColorEnd }
          ])
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.shequ-main {
  width: 100%;
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  border: 0px solid greenyellow;

  .shequ-up {
    width: 100%;
    height: 70%;
  }

  .shequ-down {
    width: 100%;
    height: 5rem;
    // height: 100%;
    overflow: hidden;
    border: 0px solid blue;
  }
}
</style>